const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");

/*
  npm i vue
  npm i webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler html-webpack-plugin -D
  npm i vue-style-loader css-loader sass-loader sass -D
  npm i vue-style-loader css-loader less-loader less -D
*/

function resolvePath(relativePath) {
  return path.resolve(__dirname, relativePath);
}

module.exports = {
  // 入口：指示Webpack从哪个文件开始打包
  entry: resolvePath("../src/main.js"),
  // 输出：指示Webpack输出到哪里去
  output: {
    path: undefined,
    filename: "./js/[name].js",
  },
  // loader：能够将webpack识别不了的模块进行编译
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.s[a|c]ss$/,
        use: ["vue-style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.less$/,
        use: ["vue-style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  // plugin: 功能更加强大
  plugins: [
    new VueLoaderPlugin(),
    // 创建html文件，自动引入打包生成js和css资源
    new HtmlWebpackPlugin({
      template: resolvePath("../public/index.html"),
    }),
  ],
  // 模式
  mode: "development",
  // devServer
  devServer: {
    port: 9527,
    host: "localhost",
    open: true, // 是否自动打开浏览器
    hot: true, // 热更新
  },
};
